<template>
    <div class="showChap">
        <TopTitle>
            <template #title>{{sectName}}</template>
        </TopTitle>
        <div class="tabsButton">
         
            <template v-for="(item,index) in designData" :key="index">
                <el-button v-if="item.t==0" type="primary" :class="currentType=='0' ? 'on' : '' "  @click="currentType='0'" :icon="VideoCamera" plain round>视频</el-button>
                <el-button v-if="item.t==1" type="primary" :class="currentType=='1' ? 'on' : '' "  @click="currentType='1'" :icon="DataLine" plain round>课件</el-button>
                <el-button v-if="item.t==2" type="primary" :class="currentType=='2' ? 'on' : '' "  @click="currentType='2'" :icon="FolderOpened" plain round>资料</el-button>
            </template>

        </div>
    
        <div class="container" v-if="designData.length" v-loading="loadingRef" >
            <div v-if="currentType=='0'">
                <VideoPlayer :MyUrl="itemData[0].url" />
               
            </div>
            
            <div v-if="currentType=='1'">
                <PdfView :MyUrl="itemData[0].url" />
            </div>
            <div v-if="currentType=='2'">
                <div class="dataMain">
                    <div class="icon">
                        <svg class="coloricon" aria-hidden="true">
                        <use :xlink:href="'#' + getFileIcon('zip')"></use>
                        </svg>
                    </div>
                    <div class="title">{{itemData[0].name}}</div>
                    <!-- <el-button class="myDownload" :icon="Download"><a  :href="ItemData[0].url" download>下载 ({{ filterSize(ItemData[0].size) }}) </a></el-button> -->

            
                    <el-button class="myDownload" :icon="Download"><a :href="itemData[0].url" download>下载 ({{filterSize(itemData[0].content_length)}}) </a></el-button>

                </div>
            </div>
        </div>
        <div style="height: 65vh; display: flex; justify-content: center; align-items: center;"v-else :image-size="200"><el-empty description="暂无内容" v-loading="loadingRef" /></div>
    </div>
</template>

<script setup>
    import TopTitle from '@/components/TopTitle.vue';
    import VideoPlayer from '@/components/VideoPlayer.vue';
    import PdfView from  '@/components/PdfView.vue';
    import {teachDesignPreview} from "@/api/chapter.js";
    import {getFileIcon,filterSize,downLoadDesignFile} from "@/utils/common";

    import {VideoCamera,DataLine,FolderOpened,Download } from '@element-plus/icons-vue';
    
    const props = defineProps({
        sectName:{
            type:String,
            default:''
        },
        nodeid:{
            type:String,
            default:''
        },

    });
    const designData = ref([]);
    const itemData=ref([])
    const currentType=ref('');
    const loadingRef = ref(true);
    const nodeidRef = ref('');
    nodeidRef.value = `${props.nodeid }`;





// 获取每小节教学设计的详细内容
    const getChapterMain = async() => {        
        loadingRef.value = true;
        await teachDesignPreview(sessionStorage.getItem("nodeid")).then(res => {
            console.log(res);
            if(res.length){
                res.sort((a, b) => a.t - b.t);
                itemData.value=res
                designData.value=res
                currentType.value=res[0].t;
            }else{
                designData.value=[]
            }
            
            
        }).finally(() => {
            loadingRef.value = false

        });
    };


    watch(() => props.nodeid, (nv) => { 
        loadingRef.value = true;
        nodeidRef.value = `${nv}`;
        getChapterMain();
    });
    watch(() => currentType.value, (nv) => {
         console.log(nv);
        itemData.value=designData.value.filter(item => item.t == nv)
        console.log(itemData.value);
        
         
    },{
        immediate:true
    });
 
// 点击下载
const goDownLoad=(item)=>{
    downLoadDesignFile(item)
    console.log(item);
   
}


getChapterMain()

</script>

<style lang='scss' scoped>
    @use '@/assets/styles/vars.module' as *;
    .showChap{
        position: relative;
        .tabsButton{
            height: $top-title-height;
            width: 100%;
            position: absolute;
            top:0;
            display: flex;
            justify-content: center;
            align-items: center;
            .el-button{
                width: 100px;
                height: 32px;
                border: none;
                font-size: 16px;
            }
            .el-button.on{
                background-color: #409EFF;
                color: #fff;
            }
        }
        .dataMain{
            text-align: center;
            margin: 200px 0 0;

            .myDownload{
              color: #409EFF;
                border-color: #409EFF;
                a{
                    color: #409EFF;
                }
            }
            .icon{
                margin: 0 auto;
                .coloricon{
                    font-size: 70px;
                }
            }
            .title{
                margin: 26px auto;
                font-size: 18px;
                color: rgba(102, 102, 102, 1);
            }
      }


    }
    .container{
        margin-top: 30px
    }

</style>
